<template>
	<main-container>
		<!-- 搜索 -->
		<el-form :model="state.queryParams" ref="queryRef" :inline="true" v-show="showSearch">
			<el-form-item label="店铺" prop="shopId">
				<select-shop ref="selectShopRef" v-model="state.queryParams.shopId" :defaultShop="true"></select-shop>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="initPage"
					><el-icon> <ele-Search /> </el-icon>搜索</el-button
				>
				<el-button @click="resetQuery"
					><el-icon> <ele-Refresh /> </el-icon>重置</el-button
				>
			</el-form-item>
		</el-form>

		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div>
				<el-button type="primary" v-auth="'product:goodsshopcategory:add'" @click="add">
					<el-icon> <ele-Plus /></el-icon>新增
				</el-button>
				<el-button @click="onExpand"
					><el-icon> <ele-Sort /></el-icon>展开/折叠</el-button
				>
			</div>
			<right-toolbar :searchBtn="false" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<Form ref="formRef" @initPage="initPage"></Form>
		<!-- 列表 -->
		<el-table
			v-if="refreshTable"
			v-loading="loading"
			:data="state.tableData"
			row-key="id"
			style="width: 100%"
			:default-expand-all="isDefaultExpand"
			border
		>
			<el-table-column prop="name" label="类目名称" width="200" />
			<el-table-column prop="description" label="类目描述" />
			<el-table-column prop="status" label="状态">
				<template #default="scope">
					<dict-tag :options="status" :value="scope.row.status"></dict-tag>
				</template>
			</el-table-column>
			<el-table-column prop="sort" label="排序" align="center" />
			<el-table-column prop="createTime" label="创建时间" />
			<el-table-column label="操作" align="center" width="200">
				<template #default="scope">
					<el-button link type="primary" v-auth="'product:goodsshopcategory:edit'" @click="edit(scope.row)">
						<el-icon> <ele-Edit /></el-icon> 修改
					</el-button>
					<el-button link type="danger" v-auth="'product:goodsshopcategory:del'" @click="del(scope.row.id)">
						<el-icon> <ele-Delete /></el-icon> 删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</main-container>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, ref, reactive, nextTick } from 'vue';
import { getPage, delObj } from '/@/api/product/goodsshopcategory';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useDict } from '/@/utils/dict';
const Form = defineAsyncComponent(() => import('./form.vue'));
// 字典
const { status } = useDict('status');
const SelectShop = defineAsyncComponent(() => import('/@/components/selectShop/index.vue'));
const state = reactive({
	tableData: [],
	queryParams: {
		shopId: '',
	},
});
const showSearch = ref(true);
const refreshTable = ref(true);
const isDefaultExpand = ref(false);
const loading = ref(false);
const formRef = ref();

const initPage = async () => {
	if (!state.queryParams.shopId) {
		state.tableData = [];
		return;
	}
	loading.value = true;
	await getPage(state.queryParams)
		.then((response: any) => {
			state.tableData = response.data.data;
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 新增按钮
 */
const add = () => {
	formRef.value.initForm();
};
/**
 * 修改按钮
 */
const edit = (row: any) => {
	formRef.value.initForm(row);
};
/**
 * 删除按钮
 */
const del = (id: string) => {
	ElMessageBox.confirm('此操作将删除该类目，是否继续?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		delObj(id)
			.then((response) => {
				ElMessage.success('删除成功');
				initPage();
			})
			.catch(() => {});
	});
};
/**
 * 展开/折叠菜单
 */
const onExpand = () => {
	isDefaultExpand.value = !isDefaultExpand.value;
	refreshTable.value = false;
	nextTick(() => {
		refreshTable.value = true;
	});
};
/**
 * 重置搜索表单
 */
const resetQuery = () => {
	state.queryParams = { shopId: '' };
};
initPage();
</script>
